<template>
  <div class="">
    <a :href="image.thumb" @click.prevent="handleGallery(index)">
      <div class="bg-secondary aspect-[10/16]">
        <UseImage
          :src="image.thumb"
          width="200"
          height="600"
          class="size-full object-cover"
        >
          <template #loading>
            <div class="flex items-center justify-center size-full">
              <RiLoaderLine class="size-8 animate-spin fill-primary" />
            </div>
          </template>

          <template #error>
            <div class="flex items-center justify-center size-full">
              <RiFileImageLine class="size-9" />
            </div>
          </template>
        </UseImage>
      </div>
    </a>
  </div>
</template>
<script setup>
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";
import { UseImage } from "@vueuse/components";

const { image, index, type } = defineProps({
  image: {
    type: Object,
    required: true,
  },

  index: {
    type: Number,
    required: true,
  },

  type: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["openModal"]);

const handleGallery = (index) => {
  emit("openModal", index);
};
</script>
